<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="70%"
    :before-close="handleClose"
    class="dialogClass"
  >
    <!-- 表单开始 -->
    <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
      <el-row :gutter="20">
        <el-col :xl="8" :lg="8">
          <el-form-item label="管理号" prop="guanlihao">
            <el-input
              v-model="ruleForm.guanlihao"
              placeholder="请输入管理号"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="8">
          <el-form-item label="电子标签号" prop="dangqianhuodong" label-width="100px">
            <el-input
              v-model="ruleForm.dangqianhuodong"
              placeholder="请输入电子标签号"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="8">
          <el-form-item
            label="当前活动量（kcal）"
            prop="dangqianhuodong"
            label-width="150px"
          >
            <el-input
              v-model="ruleForm.dangqianhuodong"
              placeholder="请输入当前活动量（kcal）"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="8">
          <el-form-item
            label="发情开始时间"
            prop="faqingkaishi"
            label-width="100px"
          >
            <el-input
              v-model="ruleForm.faqingkaishi"
              placeholder="请输入发情开始时间"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="8">
          <el-form-item
            label="持续时间"
            prop="chixushijian"
            label-width="100px"
          >
            <el-input
              v-model="ruleForm.chixushijian"
              placeholder="请输入持续时间"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="8">
          <el-form-item
            label="发情结束时间"
            prop="faqingjieshu"
            label-width="150px"
          >
            <el-input
              v-model="ruleForm.faqingjieshu"
              placeholder="请输入发情结束时间"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="8">
          <el-form-item
            label="最佳配种开始时间"
            prop="zuijiakaishi"
         label-width="150px"
          >
            <el-input
              v-model="ruleForm.zuijiakaishi"
              placeholder="请输入最佳配种开始时间"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="8" :lg="8">
          <el-form-item
            label="最佳配种结束时间"
            prop="zuijiajieshu"
            label-width="150px"
          >
            <el-input
              v-model="ruleForm.zuijiajieshu"
              placeholder="请输入最佳配种结束时间"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表单结束 -->
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        size="big"
        @click="onSubmit('ruleForm')"
        :loading="loading"
        >{{ submitButton }}</el-button
      >
      <el-button size="big" @click="resetForm('ruleForm')">重置</el-button>
      <el-button size="big" @click="close('ruleForm')">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  saveestrouscow,
  updateestrouscow,
} from "@/apis/pedometer/estrousCow.js";
export default {
  data() {
    return {
      // 提交按钮
      submitButton: "",
      // 控制弹窗
      open: false,
      // 控制按钮加载状态
      loading: false,
      // 弹窗标题
      title: "",
      // 表单项
      ruleForm: {
        faqingkaishi: "",
        dianzibiaoqian: "",
        guanlihao: "",
        chixushijian: "",
        dangqianhuodong: "",
        zuijiajieshu: "",
        faqingjieshu: "",
        zuijiakaishi: "",
      },
    };
  },
  methods: {
    // 控制弹窗
    show(title, row) {
      console.log(row);
      const _this = this;
      _this.title = title;
      _this.open = true;
      if (row) {
        _this.submitButton = "修改";
        _this.ruleForm = JSON.parse(JSON.stringify(row));
      } else {
        _this.submitButton = "确定";
      }
    },
    //关闭
    close(formName) {
      this.open = false;
      this.resetForm(formName);
    },
    //点击关闭
    handleClose(done) {
      const _this = this;
      _this
        .$confirm("系统可能不会保存您的更改", "确认关闭？")
        .then((_) => {
          done();
          _this.resetForm("ruleForm");
        })
        .catch((_) => {});
    },
    //点击提交
    onSubmit(formName) {
      const _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (_this.title == "创建发情牛记录") {
            saveestrouscow(_this.ruleForm).then(function (res) {
              if (res.code === 0) {
                _this.$alert(_this.ruleForm.guanlihao + res.msg, "提示", {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    _this.close("ruleForm");
                    _this.$parent.$parent.search();
                  },
                });
              }
            });
          } else {
            updateestrouscow(_this.ruleForm).then(function (res) {
              if (res.code === 0) {
                _this.$alert(_this.ruleForm.guanlihao + res.msg, "提示", {
                  confirmButtonText: "确定",
                  callback: (action) => {
                    _this.close("ruleForm");
                    _this.$parent.$parent.search();
                  },
                });
              }
            });
          }
        }
      });
    },
    // 表单重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style></style>